import { genForm, genFormValidate } from "../validate";
import { defineFormRules } from "../form";
import { linkEqualMain, linkEqualSub, phone } from "../form-field";

export var template = `
<div class="aui-form-group">
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">
        <h5>修改用户信息表单</h5>
        <hr better/>
    </div>
</div>
</div>

<div class="aui-form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    旧密码
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <input class="aui-form-control" type="password"
    v-model="form.data.v1.value"            
    v-input-validate="form.element.v1">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>

<div class="aui-form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    新密码
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <input class="aui-form-control" type="password" 
    v-model="form.data.v2.value"            
    v-input-validate="form.element.v2">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
(不要少于6位)
</div>
</div>
</div>

<div class="aui-form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    确认密码
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <input class="aui-form-control" type="password"
    v-model="form.data.v3.value"            
    v-input-validate="form.element.v3">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<div class="aui-form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <button class="btn btn-info" type="button" :disabled="checkPasswordGroupError()">提交</button>
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

`;

export var formField = {
    "v1":  {
        validate: {
            presence: true,
        }
    },
    "v2": linkEqualMain("v3", "",
        {
            validate: {
                presence: true,
                length: {
                    minimum: 6
                }
            }
        }
    ),
    "v3": linkEqualSub("v2"),            
};


export class UIExampleUserInfoForm extends window.AUI.app.BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
            checkPasswordGroupError() {
                var self = this;
                return self.form.checkErrorByfieldkeys(["v1", "v2", "v3"]);
            }
        }
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
<form ref="form" class="aui-form-validation" action="">   

${template}

</form>
</div>`;
    }
    _mounted() {
        var self = this;
        genFormValidate(self, "form");
        self.form.validateAll();
    }
    _data() {
        var ret = {};
        ret.formFields = defineFormRules(formField);
        ret.form = genForm(ret.formFields, Object.keys(ret.formFields));
        return ret;
    }  
}

